<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/roomBind.css"rel="stylesheet"  />

		<style>
			.mui-input-group:before {
				background-color: white
			}
			/*  */
			.mui-input-clear {
				text-align: right;
			}

			#sel {
				text-align: right;
				font-size: 16px;
			}

			select {
				margin-bottom: 0;
			}

			.mui-input-row select {
				padding-right: 3%;
			}

			#btn {
				margin: 20% 0 0 5%;
				height: 45px;
				border-radius: 20px;
				line-height: 10px;
				width: 90%;
			}

			a {
				float: right;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">绑定房屋</h1>
		</header>

		<div id="div">
			<p id="p">温馨提示：绑定房屋需要填写您在服务中心登记过的身份信息，信息匹配正确后即可认证成功。</p>
		</div>

		<p id="text1">填写房屋信息</p>
		<ul class="mui-table-view" id="first">
			<li class="mui-table-view-cell">
				<p class="p1">小区</p>
				<a class="mui-navigate-right">
					恒大城
				</a>
			</li>
			<li class="mui-table-view-cell" id="selRoom">
				<p class="p1">房间</p>
				<a class="mui-navigate-right" id="myinput">
					&nbsp;
				</a>
			</li>
		</ul>

		<p id="text2">填写物业登记身份信息</p>
		<form class="mui-input-group">
			<div class="mui-input-row">
				<label>姓名</label>
				<input id="name" type="text" class="mui-input-clear" placeholder="请输入姓名">
			</div>
			<div class="mui-input-row">
				<label>手机号</label>
				<input id="pwd" type="text" class="mui-input-clear" placeholder="请输入手机号">
			</div>
			<div class="mui-input-row">
				<label>身高</label>
				<input id="height" type="text" class="mui-input-clear" placeholder="请输入身高">
			</div>
			<div class="mui-input-row">
				<label>体重</label>
				<input id="weight" type="text" class="mui-input-clear" placeholder="请输入体重">
			</div>
			<div class="mui-input-row">
				<label>年龄</label>
				<input id="year" type="text" class="mui-input-clear" placeholder="请输入年龄">
			</div>
			<div class="mui-input-row">
				<label>性别</label>
				<select class="sex" id="sex" name="">
					<option value="">男</option>
					<option value="">女</option>
				</select>
			</div>
			<div class="mui-input-row">
				<label>身份</label>
				<select class="userType" id="type" name="">
					<option value="业主">业主</option>
					<option value="租户">租户</option>
				</select>
			</div>
		</form>
		<button id="btn" type="button" class="mui-btn mui-btn-blue mui-btn-block">认证</button>

		<script src="../js/mui.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/req.js"></script>
		<script type="text/javascript">
			mui.ready(function() {
				window.addEventListener('loadLocal', function(event) {
					console.log("loadLocal")
					//获得事件参数
					var localRoom = localStorage.getItem("room");
					console.log(localRoom)
					$("#myinput").html(localRoom);
				});
			})
			mui.init()

			mui('#first').on('tap', '#selRoom', function() {
				console.log(this)
				// console.log($(this).html())
				// mui.toast('bind')
				mui.openWindow('roomSel.html', 'roomSel', {})
			})

			mui('body').on('tap', '#btn', function() {
				var name = $("#name").val()
				console.log(name)
				if (name == "") {
					mui.toast('姓名不能为空')
					return;
				}

				var pwd = $("#pwd").val()
				console.log(pwd)
				if (pwd == "") {
					mui.toast('手机号不能为空')
					return;
				}

				var height = $("#height").val()
				console.log(height)
				if (height == "") {
					mui.toast('身高不能为空')
					return;
				}

				var weight = $("#weight").val()
				console.log(weight)
				if (weight == "") {
					mui.toast('体重不能为空')
					return;
				}

				var year = $("#year").val()
				console.log(year)
				if (year == "") {
					mui.toast('年龄不能为空')
					return;
				}
				var userType = $("#type").val();
				console.log(userType)

				console.log(localStorage.getItem("token"))

				mui.ajax(apiurl + 'api/addWaitedRoom', {
					data: {
						"name": name,
						"height": height,
						"weight": weight,
						"age": year,
						"roomId": localStorage.getItem("roomId"),
						"userType": userType
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						"Authorization": localStorage.getItem("token"),
						'Content-Type': 'application/json'
					},
					success: function(data) {
						console.log(data)
						if (data.code == 200) {
							mui.toast('绑定成功');
							mui.back()
						} else {
							mui.toast('该房屋已绑定')
						}
					},
					error: function(xhr, type, errorThrown) {

					}
				});
			})
		</script>

	</body>

</html>